<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
    <title>detail</title>
    <!-- build:css /static/lib/search.min.css -->
    <link href="/static/lib/css/mui.css" rel="stylesheet"/>
    <link href="/static/lib/css/swiper-3.4.2.min.css" rel="stylesheet"/>
    <!-- endbuild -->
    <link href="/static/components/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/static/components/css/search.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="input_search">
    <input id="input_search_child" type="text" maxlength="10" placeholder="请输入游戏名称">
    <span id="input_search_click">取消</span>
</div>
<div class="cut_off_line"></div>
<div id="like">
    <div class="like_title">
        大家都在搜
    </div>
    <div class="mui-row" id="like_list">
        <div class="mui-col-sm-6 mui-col-xs-6">
            <div class="like_item">
                少年三国志
            </div>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-6">
            <div class="like_item">
                火线特工
            </div>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-6">
            <div class="like_item">
                口袋大师
            </div>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-6">
            <div class="like_item">
                火炬之光
            </div>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-6">
            <div class="like_item">
                大富豪3
            </div>
        </div>
    </div>
</div>

<div id="history">
    <div class="history_title">
        搜索历史
    </div>
    <div class="cut_off_line_history"></div>
    <div id="history_list">
        <!--<div class="history_item iconfont icon-shijian">
        少年驱魔教团
        </div>
        <div class="history_item iconfont icon-shijian">
            寻找前世之旅
        </div>
        <div class="history_item iconfont icon-shijian">
            海贼王
        </div>-->
    </div>
</div>

<div class="iconfont icon-icons64x6430 clear_history">
    清除搜索记录
</div>
<!-- build:js /static/js/search.min.js -->
<script src="/static/lib/js/mui.min.js"></script>
<script src="/static/lib/js/jquery.js" type="text/javascript"></script>
<script src="/static/components/js/util.js" type="text/javascript" charset="utf-8"></script>
<!-- endbuild -->
<script src="/static/components/js/ag.js" type="text/javascript"></script>


<script>
    window.onload = function () {
        var base_url = '{{ g.api_url }}';

        var channel_code = '{{ g.channel_code }}';

        loadingAnalyze('{{ g.analyze_url }}');
        //输入框变化、点击监听
        var input_search = document.getElementById("input_search_child");
        var input_search_click = document.getElementById("input_search_click");

        /*搜索框右侧按钮对应改变*/
        input_search.addEventListener('input', function () {
            if (this.value.length == 0) {
                input_search_click.innerText = '取消';
            } else {
                input_search_click.innerText = '搜索';
            }
        });

        //点击右侧按钮时变化
        document.getElementById("input_search_click").addEventListener('tap', function () {
            if (input_search_click.innerText == '取消') {
                window.location = "{{ url_for('home.index') }}";
                return;
            }
            //				alert(input_search_click.innerText + '---content--' + input_search.value);
//		window.name = input_search.value;
            localStorage.setItem('search', input_search.value);
            window.location.href = '{{ url_for('home.search_result') }}';
            /*点击搜索时加入历史记录*/
            addHistory(input_search.value);

            input_search.value = '';
        });

        //点击大家都在搜
        mui('#like_list').on('tap', '.like_item', function () {
//		window.name = this.innerText;
            localStorage.setItem('search', this.innerText);
            window.location.href = '{{ url_for('home.search_result') }}';
        });
        //搜索历史
        mui('#history_list').on('tap', '.history_item', function () {
//		window.name = this.innerText;
            localStorage.setItem('search', this.innerText);
            window.location.href = '{{ url_for('home.search_result') }}';
        });
        //清空按钮
        mui('.clear_history')[0].addEventListener('tap', function () {
            //清空localStorage里面内容
            localStorage.removeItem('history');

            //清除列表和按钮
            var history_list = document.getElementById('history_list');
            history_list.innerHTML = '';
            var btn_clear = document.getElementsByClassName("clear_history");
            btn_clear[0].style.display = 'none';
            //修改搜索历史文字
            var history_title = document.getElementsByClassName("history_title");
            history_title[0].innerText = '暂无搜索历史';
        });
        //进来的时候查询本地历史记录
        function showHistory() {
            if (localStorage.getItem('history') != null) {
                var historyGetObj = JSON.parse(localStorage.getItem('history'));
                var history_list = document.getElementById('history_list');
                for (var hisnum = 0; hisnum < historyGetObj.history.length; hisnum++) {
                    var div = document.createElement('div');
                    div.className = 'history_item iconfont icon-shijian';
                    div.innerText = historyGetObj.history[hisnum];
                    history_list.appendChild(div);
                }
            } else {
                var btn_clear = document.getElementsByClassName("clear_history");
                btn_clear[0].style.display = 'none';
                //修改搜索历史文字
                var history_title = document.getElementsByClassName("history_title");
                history_title[0].innerText = '暂无搜索历史';
            }
        }

        showHistory();

        function addHistory(dataToSave) {
            if (localStorage.getItem('history') != null) {
                var historyGetObj = JSON.parse(localStorage.getItem('history'));
                for (var i = 0; i < historyGetObj.history.length; i++) {
                    if (historyGetObj.history[i] == dataToSave) {
                        return;
                    }
                }
                historyGetObj.history.push(dataToSave);
                localStorage.setItem('history', JSON.stringify(historyGetObj));
            } else {
                var historySaveObj = {
                    history: []
                };
                historySaveObj.history.push(dataToSave);
                localStorage.setItem('history', JSON.stringify(historySaveObj));
            }
        }
    };
</script>
</body>

</html>